<template>
    <div class="mineCenter">
        <van-sticky>
            <div class="header">个人中心</div>
        </van-sticky>

        <div class="user">
            <div class="userImg">
                <img :src="'http://218.7.112.123:10001/'+users.avatar" alt="">
            </div>
            <div class="name">
                {{users.userName}}
            </div>
        </div>
        <div class="buttom">
            <div class="handle">
                <div class="mine" @click="gotoUserInfo">
                    <span class="iconfont icon-gerenxinxi "></span>
                    个人信息
                    <i class="iconfont icon-gengduo more"></i>
                </div>
                <div class="order" @click="gotoOder">
                    <span class="iconfont icon-dingdan "></span>
                    订单列表
                    <i class="iconfont icon-gengduo more"></i>
                </div>
                <div class="pwd" @click="gotoResetPwd">
                    <span class="iconfont icon-shezhi "></span>
                    修改密码
                    <i class="iconfont icon-gengduo more"></i>
                </div>
                <div class="opinion" @click="gotoAdvice">
                    <span class="iconfont icon-xie "></span>
                    意见反馈
                    <i class="iconfont icon-gengduo more"></i>
                </div>
            </div>
            <div class="exitLogin" @click="exit">
                退出登录
            </div>
        </div>

    </div>
</template>
<script>
import { userInfo } from "@/service/user/userLogin";
export default {
    data() {
        return {
            users: {},
        }
    },
    async created() {
        let { data } = await userInfo();
        console.log(data);
        this.users = data.user;
    },
    methods: {
        login() {
            this.$router.push("/login");
        },
        exit() {
            localStorage.removeItem("token");
            this.$router.push("/");
        },
        gotoUserInfo() {
            this.$router.push("/mine/info");
        },
        gotoResetPwd() {
            this.$router.push("/mine/reset");
        },
        gotoAdvice() {
            this.$router.push("/mine/advice");
        },
        gotoOder() {
            this.$router.push("/mine/order");
        }
    }
}
</script>
<style scoped lang="scss">
body {
    height: 100%;
}

.mineCenter {
    height: 100%;
    background-color: #EDEDED;
}

.user {
    height: 200px;
    padding-left: 50px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .userImg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 10px;
        background-color: gray;
    }

    .name {
        font-size: 30px;
    }
}

.buttom {
    padding-top: 10px;

    .handle {
        background-color: #fff;
        margin-bottom: 50px;

        div {
            line-height: 30px;
            padding: 10px;
            border-bottom: 1px solid #ebe9e9;
            position: relative;

            .more {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }
    }

    .exitLogin {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: #E4443F;
    }
}
</style>